<template>
  <div class="frank_em_record_dialog">
    <el-dialog v-model="regulationMeasureVisible" title="调度方案" width="700px" @close="handleClose"
      :close-on-click-modal="false" :destroy-on-close="true" @open="handleOpen">
      <div class="record_box">
        <div class="frank_top">
          <el-descriptions class="margin-top" :title="row.Name" :column="2" :size="size" :style="blockMargin">
            <el-descriptions-item label="编号:" style="overflow: hideen">{{ row.PatientRecordCode }}</el-descriptions-item>
            <!-- <el-descriptions-item label="病情症状:">{{ row.Symptom }}</el-descriptions-item> -->
            <el-descriptions-item label="车辆:">{{ row.AmbName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话:">{{ row.Telephone }}</el-descriptions-item>
            <el-descriptions-item label="病情等级:">{{ row.IllnessLevel }}</el-descriptions-item>
            <el-descriptions-item label="分配医院:">{{ row.HospitalName }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="frank_center">
          <div class="my-table">
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
              <el-tab-pane label="推荐车辆" name="first">
                <el-table :data="venuesAmbList" style="width: 100%" height="350px" highlight-current-row
                  @row-click="curRowClick">
                  <el-table-column prop="Name" label="车牌号" />
                  <el-table-column prop="Distance" label="距离(米)"></el-table-column>
                  <el-table-column label="是否在线">
                    <template #default="scope">
                      <span>{{ scope.row.IsOnline == 1 ? "是" : "否" }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="StateName" label="车辆状态" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="定点医院" name="second">
                <el-table :data="hospitalList" style="width: 100%" max-height="350px" height="350px" highlight-current-row
                  @row-click="curRowHospClick">
                  <el-table-column prop="name" label="医院名称" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="regulationMeasureVisible = false">取消</el-button>
          <el-button type="primary" @click="openIsSure">派车</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  computed,
  watch,
} from 'vue';
import { useStore } from 'vuex';
import VueEvent from 'utils/event';
import { ElMessage, ElMessageBox } from 'element-plus';
import { GetVenuesAmbList, DispatchAmb } from 'network/patientRecord';
import { wgs84togcj02tobd09 } from 'utils/84tobaiduGPS.js';
export default {
  name: 'EMRecord',
  components: {},
  props: [],
  setup() {
    const store = useStore(); //vuex 状态管理
    const size = ref('');
    const blockMargin = computed(() => {
      const marginMap = {
        large: '32px',
        default: '28px',
        small: '24px',
      };
      return {
        marginTop: marginMap[size.value] || marginMap.default,
      };
    });
    const state = reactive({
      activeName: ref('first'),
      regulationMeasureVisible: ref(false),
      row: ref(null),
      id: 0,
      ambulanceTableData: ref([]),
      hospitalTableData: ref([]),
      hospitalList: ref([]),
      venuesAmbList: ref([]),
    });
    // console.log(dialogVisible);
    const handleClose = () => {
      state.regulationMeasureVisible = false;
      state.activeName = 'first';
    };
    const handleCancel = () => {
      handleClose()
    };
    const handleClickTab = (tab, event) => {
      // console.log(tab, event);
    };
    const curRowClick = (row, column, e) => {
      // console.log(row);
      state.row.AmbName = row.Name;
      state.row.ambLng = row.Lng;
      state.row.ambLat = row.Lat;
      state.row.AmbCode = row.Code;
    };
    const curRowHospClick = (row, column, e) => {
      // console.log(row);
      state.row.HospitalName = row.name;
      state.row.hosLng = row.lng;
      state.row.hosLat = row.lat;
      state.row.HospitalCode = row.id;
    };
    const openIsSure = async () => {
      // console.log(state.row, 'openIsSure');
      if (state.row.AmbCode == null && state.row.AmbName == null) {
        ElMessage({
          type: 'warning',
          message: '请选择车辆（车辆必选，医院非必选）',
        });
        //if外面的语句不再执行，直接跳出这个函数
        return;
      }
      // console.log("app-----",store.state.app.userInfoVx)
      let userInfo = store.state.app.userInfoVx;
      if (state.row.AmbName != '' && state.row.AmbName != null && state.row.AmbName != '由指挥部派车') {
        ElMessageBox.confirm(`
          车辆：${state.row.AmbName}，医院：${state.row.HospitalName == null ? "" : state.row.HospitalName}
        `,
          {
            confirmButtonText: '确定派车',
            cancelButtonText: '取消',
            type: 'success',
          }).then(() => {
            DispatchAmb({
              dispatchName: userInfo.Name,
              dispatchCode: userInfo.WorkCode,
              patientRecordCode: state.row.PatientRecordCode,
              ambCode: state.row.AmbCode,
              hospitalCode: state.row.HospitalCode,
              chineseName: state.row.HospitalName,
            }).then((res) => {
              // console.log(res);
              if (res) {
                ElMessage({ type: 'success', message: '调度成功！' });
                handleClose()
              } else {
                ElMessage({ type: 'error', message: '调度失败！' });
              }
            });
          })
          .catch(() => {
            ElMessage({ type: 'info', message: '调度取消！' });
            handleClose()
          });
      } else {
        ElMessage({ type: 'info', message: '请选择车辆！' });
      }
    };
    const handleOpen = async () => {

    }
    onBeforeMount(() => { });
    onMounted(() => {
      VueEvent.on('showRegulationMeasure', async (data) => {
        console.log(data);
        state.row = data.row
        // 显示弹窗
        state.regulationMeasureVisible = data.isShowRegulationMeasure;
        // 获取推荐医院
        let hospitalList = store.state.HospVenuAmbuModule.hospitalTreeRemoteVx;
        state.hospitalList = hospitalList;
        // console.log(state.hospitalList)
        // 根据场馆id获取推荐车辆
        try {
          // console.log('data.row', data.row)
          let venuesAmbList = await GetVenuesAmbList({
            CityCode: data.row.CityCode,
            Lng: data.row.mpLng,
            Lat: data.row.mpLat
          });
          // console.log("123", venuesAmbList);
          let venAmbuListArr = [];
          venuesAmbList.forEach((element) => {
            let lngAndLat = wgs84togcj02tobd09(element.Lng, element.Lat);
            element.Lng = lngAndLat.Lng;
            element.Lat = lngAndLat.Lat;
            // console.log("推荐车辆",element.Lat)
            venAmbuListArr.push(element);
          });
          state.venuesAmbList = venAmbuListArr;
        } catch (error) {
          throw error;
        }
      });
    });
    const refState = toRefs(state);
    return {
      // 状态
      ...refState,
      store,
      blockMargin,
      size,
      // 事件
      handleClose,
      handleCancel,
      handleClickTab,
      curRowClick,
      curRowHospClick,
      openIsSure,
      handleOpen
    };
  },
};
</script>
<style scoped>
/* 弹窗距离顶部的距离 */
:deep(.el-dialog) {
  --el-dialog-margin-top: 70px;
}

/* 弹窗header关闭按钮样式 */
:deep(.el-dialog .el-dialog__header) {
  padding: 5px;
  height: 27px;
  line-height: 27px;
  font-size: 10px;
  background: #758bfd;
}

:deep(.el-dialog__headerbtn) {
  top: 0;
  width: 20px;
  height: 27px;
  background: #758bfd;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}

:deep(.el-dialog__headerbtn .el-dialog__close):hover {
  color: red;
}

.frank_em_record_dialog .record_box {
  height: 600px;
}

.record_box .frank_top {
  height: 180px;
  background: #f3f6fc;
}

.record_box .frank_center {
  height: 230px;
  margin-top: 10px;
  background: #f3f6fc;
}

.record_box .frank_bottom {
  height: 280px;
  margin-top: 10px;
}

/* top */

.el-descriptions {
  margin-top: 5px !important;
  margin: 10px;
}

:deep(.el-descriptions__body) {
  background: #f3f6fc;
}

/* center */

/* bottom */
.frank_bottom .box-card {
  height: 100%;
}

:deep(.frank_bottom .el-table th.el-table__cell) {
  background: #e0e1e3;
}

:deep(.frank_bottom .el-card__header) {
  padding: 8px;
  font-weight: bold;
  font-size: 14px;
}
</style>